<template>
  <ProjectInfo
    :preview="true"
    :projectId="`${route.query.projectId}`"
    :reportType="'RRTCP'"
    :sign="true"
    @preview-file="previewFile"
  />
  <ContentWrap class="chem-record-wrap">
    <div style="position: relative">
      <el-tabs v-model="activeTab" class="chem-tabs" tab-position="top" type="border-card">
        <el-tab-pane label="化学报告" name="chemical">
          <template v-if="chemicalList.length">
            <div v-for="(item, idx) in chemicalList" :key="idx" class="record-item">
              <ChemicalTestReport :form-data="item" :test-type="1" />
            </div>
          </template>
          <template v-else>
            <div style="padding: 24px; text-align: center; color: #999"
              >点击同步获取最新报告信息</div
            >
          </template>
        </el-tab-pane>
        <el-tab-pane label="物理报告" name="physics">
          <template v-if="physicsList.length">
            <div v-for="(item, idx) in physicsList" :key="idx" class="record-item">
              <PhysicsReport :form-data="item" :test-type="2" />
            </div>
          </template>
          <template v-else>
            <div style="padding: 24px; text-align: center; color: #999"
              >点击同步获取最新报告信息</div
            >
          </template>
        </el-tab-pane>
        <el-tab-pane label="粉尘报告" name="dust">
          <template v-if="dustList.length">
            <div v-for="(item, idx) in dustList" :key="idx" class="record-item">
              <ChemicalTestReport :form-data="item" :test-type="3" />
            </div>
          </template>
          <template v-else>
            <div style="padding: 24px; text-align: center; color: #999"
              >点击同步获取最新报告信息</div
            >
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import { useRoute } from 'vue-router'
import { ProjectApi } from '@/api/dk/project'
import ChemicalTestReport from './ChemicalTestReport.vue'
import PhysicsReport from '@/views/project/list/PhysicsReport.vue'
import ProjectInfo from '@/views/project/list/ProjectInfo.vue'

const activeTab = ref(localStorage.getItem('testReportIndex') || 'chemical')
const dustList = ref<any[]>([])
const physicsList = ref<any[]>([])
const chemicalList = ref<any[]>([])

const route = useRoute()
const router = useRouter()

defineOptions({ name: 'TestReportIndex' })

/** 添加开始调查方法 */
const previewFile = () => {
  // 跳转到现场调查页面，并携带项目信息
  const { projectId, projectNo } = route.query
  router.push({
    path: '/previewFile',
    query: {
      projectId: projectId,
      projectNo: projectNo,
      operationType: 14
    }
  })
}

// 初始化时获取数据

watch(activeTab, (val) => {
  localStorage.setItem('testReportIndex', val)
})

onMounted(async () => {
  const projectId = route.query.projectId
  const {dustData: dustListData, mergedChemical: chemicalListData, physicalData: physicsListData} = await ProjectApi.getExperimentalResults(Number(projectId))
  dustList.value = dustListData || []
  physicsList.value = physicsListData || []
  chemicalList.value = chemicalListData || []
})
</script>

<style lang="scss" scoped>
.chem-tabs {
  // 保持极简无圆角无阴影
  :deep(.el-tabs__item) {
    font-size: 16px;
  }
}

.record-item {
  margin-bottom: 60px;
}
</style>
